<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>人事管理系统 ——文档管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="cache-control" content="no-cache"/>
    <meta http-equiv="expires" content="0"/>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>
    <meta http-equiv="description" content="This is my page"/>
    <link href="../css/css.css" type="text/css" rel="stylesheet"/>
    <link href="../css/pager.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
    <script type="text/javascript" src="../js/jquery-migrate-1.2.1.js"></script>
    <link href="../js/ligerUI/skins/Aqua/css/ligerui-dialog.css" rel="stylesheet" type="text/css"/>
    <script src="../js/ligerUI/js/core/base.js" type="text/javascript"></script>
    <script src="../js/ligerUI/js/plugins/ligerDialog.js" type="text/javascript"></script>
    <script src="../js/ligerUI/js/plugins/ligerDrag.js" type="text/javascript"></script>
    <script src="../js/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>

    <script src="../js/a/vue.js"></script>
    <script src="../js/a/axios-0.18.0.js"></script>
    <link rel="stylesheet" href="../css/index.css">
    <script src="../js/a/index.js"></script>
    <script src="../js/a/axios-config.js"></script>
</head>
<body>
<div id="file">
    <!-- 导航 -->
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td height="10"></td>
        </tr>
        <tr>
            <td width="15" height="32"><img src="../images/main_locleft.gif" width="15" height="32"></td>
            <td class="main_locbg font2"><img src="../images/pointer.gif">&nbsp;&nbsp;&nbsp;当前位置：文档管理 &gt; 文档查询</td>
            <td width="15" height="32"><img src="../images/main_locright.gif" width="15" height="32"></td>
        </tr>
    </table>

    <table width="100%" height="90%" border="0" cellpadding="5" cellspacing="0" class="main_tabbor">
        <!-- 查询区  -->
        <tr valign="top">
            <td height="30">
                <table width="100%" border="0" cellpadding="0" cellspacing="10" class="main_tab">
                    <tr>
                        <td class="fftd">

                            <table width="100%" border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td class="font3">
                                        标题：<input type="text" name="title" v-model="params.title"/>
                                        <input type="submit" value="搜索" @click="load"/>
                                        <input type="button" id="delete" value="删除" @click="del()">
                                    </td>
                                </tr>
                            </table>

                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <!-- 数据展示区 -->
        <tr valign="top">
            <td height="20">
                <table width="100%" border="1" cellpadding="5" cellspacing="0"
                       style="table-layout:fixed;border:#c2c6cc 1px solid; border-collapse:collapse;">
                    <tbody>
                    <colgroup>
                        <col width="5%">
                        <col width="25%">
                        <col width="15%">
                        <col width="10%">
                        <col width="40%">
                        <col width="5%">
                        <col width="5%">
                    </colgroup>
                    <tr class="main_trbg_tit" align="center">
                        <td><input type="checkbox" id="checkAll" v-model="checkAll" @change="handleCheckAllChange"></td>
                        <td>标题</td>
                        <td>创建时间</td>
                        <td>创建人</td>
                        <td>描述</td>

                        <td>操作</td>

                        <td>下载</td>
                    </tr>

                    <tr ondblclick="down(7);" class="main_trbg" align="center" id="data_0"
                        style="background-color: rgb(255, 255, 255);" v-for="item in this.fileData">
                        <td><input type="checkbox" id="box_0" value="7" v-model="item.check" :value="item.id"></td>
                        <td>{{item.title}}</td>
                        <td>{{item.createTime}}</td>
                        <td>{{item.nickname}}</td>
                        <td style="width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">
                            {{item.remark}}
                        </td>

                        <td align="center" width="40px;"><a
                                :href="'showUpdateDocument.html?id='+item.id+'&title='+item.title+'&remark='+item.remark">
                            <img title="修改" src="../images/update.gif"></a>
                        </td>

                        <td align="center" width="40px;"><a :href="'/api/file/download/'+item.fileName" id="down_7">
                            <img width="20" height="20" title="下载" src="../images/downLoad.png"></a>
                        </td>
                    </tr>


                    </tbody>
                </table>
            </td>
        </tr>
        <!-- 分页标签 -->
        <tr valign="top">
            <td align="center" class="font3">
                <table width="100%" align="center" style="font-size:13px;" class="digg">
                    <tbody>
                    <tr>
                        <el-pagination
                                @size-change="changeSize"
                                @current-change="changeNum"
                                :current-page.sync="params.pageNum"
                                :page-sizes="[3, 5, 10, 20]"
                                :page-size.sync="params.pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                        <!--            <td style="COLOR: #0061de; MARGIN-RIGHT: 3px; PADDING-TOP: 2px; TEXT-DECORATION: none"><span class="disabled" @click="handleSizeChange">上一页</span><span-->
                        <!--                class="current" v-model="params.pageNum">1</span><span @click="handleSizeChange">下一页</span>&nbsp;跳转到&nbsp;&nbsp;<input-->
                        <!--                style="text-align: center;BORDER-RIGHT: #aaaadd 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #aaaadd 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #aaaadd 1px solid; COLOR: #000099; PADDING-TOP: 2px; BORDER-BOTTOM: #aaaadd 1px solid; TEXT-DECORATION: none"-->
                        <!--                type="text" size="2" id="pager_jump_page_size">&nbsp;<input type="button"-->
                        <!--                                                                            style="text-align: center;BORDER-RIGHT: #dedfde 1px solid; PADDING-RIGHT: 6px; BACKGROUND-POSITION: 50% bottom; BORDER-TOP: #dedfde 1px solid; PADDING-LEFT: 6px; PADDING-BOTTOM: 2px; BORDER-LEFT: #dedfde 1px solid; COLOR: #0061de; MARGIN-RIGHT: 3px; PADDING-TOP: 2px; BORDER-BOTTOM: #dedfde 1px solid; TEXT-DECORATION: none"-->
                        <!--                                                                            value="确定" id="pager_jump_btn"></td>-->
                        <!--          </tr>-->
                    <tr align="center">
                        <td style="font-size:13px;"></td>
                    </tr>
                    <tr>
                        <td style="COLOR: #0061de; MARGIN-RIGHT: 3px; PADDING-TOP: 2px; TEXT-DECORATION: none">总共&nbsp;{{total}}&nbsp;条记录，当前显示{{(params.pageNum-1)*params.pageSize
                            + 1}}-{{(params.pageNum-1)*params.pageSize + params.pageSize}}条记录。
                        </td>
                    </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </table>
    <div style="height:10px;"></div>
</div>
<script>
    new Vue({
        el: '#file',
        data: {
            fileData: [],
            total: 0,
            checkAll: false,//全选
            params: {
                pageNum: 1,
                pageSize: 5,
                title: ''
            },
            checkedIds: [],
        },
        computed: {},
        methods: {
            load: function () {
                this.checkAll = false;
                axios.get('/api/file/page', {
                    params: this.params
                }).then(res => {
                    if (res.data.code == '200') {
                        this.fileData = res.data.data.list;
                        console.log(this.fileData)
                        this.total = res.data.data.total;
                    } else if (res.data.msg) {
                        this.$message.error(res.data.msg);
                    } else {
                        this.$message.error('系统错误');
                    }
                }).catch(err => {
                    this.$message.error(err);
                    console.log(err);
                });
            },
            changeSize() {//改变每页条数时执行的函数
                this.load();
            },
            changeNum() {//改变页码时执行的函数
                this.load();
            },
            // 全选
            handleCheckAllChange: function () {
                this.fileData.forEach(item => {
                    item.check = this.checkAll
                });
            },
            del: function () {
                this.checkedIds = [];
                // console.log(this.checkedIds)
                this.fileData.forEach(item => {
                    if (item.check) this.checkedIds.push(item.id);
                });
                console.log(this.checkedIds);
                $.ligerDialog.confirm("确认要删除" + this.checkedIds.join() + "吗?", "删除文件", (r) => {
                    if (r) {
                        let formData = new FormData()
                        formData.append('ids', this.checkedIds.join());
                        axios.post('/api/file/removes', formData)
                            .then(res => {
                                if (res.data.code == 200) {
                                    this.$message.success('删除成功')
                                    //成功的话就重新拉取数据
                                    this.load();
                                } else if (res.data.msg) {
                                    this.$message.error(res.data.msg);
                                } else {
                                    this.$message.error('系统错误');
                                }
                            }).catch(err => {
                            this.$message.error(err);
                            console.log(err);
                        });
                    }
                });
            }
        },
        created() {
            this.load()
        },
    })
</script>
</body>
</html>